<template>
  <div ref="messageContentRef" class="msg-content">
    <template v-for="(item, index) in prompt" :key="index">
      <div
        class="msg-item"
        :style="{
          backgroundColor:
            index === prompt.length - 1 && newMsgMark
              ? themeStyle[theme].btnHoverColor2
              : 'transparent'
        }"
      >
        <div>{{ item.time }}</div>
        <div v-if="item?.source" style="color: #64d7d7dd">【{{ item.source }}】</div>
        <div :style="{ color: getColor(item.type) }">{{ item.content }}</div>
        <div v-if="item?.count" class="msg-item-count">{{ '(x' + item.count + ')' }}</div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { useMessageStore } from '@renderer/store/message/message'
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'

const messageStore = useMessageStore()
const { prompt, messageContentRef } = storeToRefs(messageStore)

const getColor = (type: string | undefined): string => {
  switch (type) {
    case 'info':
      return '#999'
    case 'error':
      return '#d46c63dd'
    case 'warning':
      return '#f1ac0bdd'
    case 'success':
      return '#52c41add'
    default:
      return '#999'
  }
}

const newMsgMark = ref(true)

onMounted(() => {
  if (messageContentRef.value) {
    messageContentRef.value.scrollTop = messageContentRef.value.scrollHeight
  }
  newMsgMark.value = false
})

const globalStyleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(globalStyleStore)
</script>

<style scoped lang="scss">
.msg-content {
  height: calc(100% - 40px);
  padding: 5px;
  overflow-y: auto;

  /* 设置滚动条样式 */
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #cccccc85;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: #aaaaaa85;
  }

  .msg-item {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 7px;
    color: #999;
    font-size: $font-size-small;
    transition: background-color 2s ease-in-out;
    .msg-item-source {
      color: $delta-color-qing;
    }
    .msg-item-count {
      color: $delta-color-lan;
    }
  }
}
</style>
